<template>
  <div>
    <h1>当前求和为：{{ reuslt }}</h1>
    <el-select size="mini" v-model.number="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button @click="add">+</el-button>
    <el-button @click="del">-</el-button>
    <el-button @click="addOdd">当前求和为奇数再加</el-button>
    <el-button @click="addDelay">等一等再加</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      reuslt: 0,
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
      ],
      value: "",
    };
  },
  methods: {
    add() {
      this.reuslt += Number(this.value);
    },
    del() {
      this.reuslt -= this.value;
    },
    addOdd() {
      if (this.reuslt % 2) {
        this.reuslt += this.value;
      }
    },
    addDelay() {
      setTimeout(() => {
        this.reuslt += this.value;
      }, 1000);
    },
  },
};
</script>
<style scoped>
.el-select-dropdown__item.hover /deep/,  .el-select-dropdown__item:hover /deep/{
    background-color: 	#FFFACD;
    color: #e6694a;
}
</style>